<template>
  <view @click="calendarRefFun">
    <uni-easyinput
      v-model="currentForm[currentFildData.field]"
      class="form_item"
      :disabled="true"
      suffixIcon="calendar"
      :placeholder="currentFildData.placeholder ? currentFildData.placeholder : currentFildData.label" />
  </view>
  <uni-calendar ref="calendarRef" class="uni-calendar--hook" :clear-date="true" :insert="false" @confirm="calendarConfirm" v-bind="currentFildData.options" />
</template>

<script setup lang="ts" name="IFormSelect">
import { FieldListInterFace, FormDataInterFace } from '#/form/IForm';
import { computed, onMounted, PropType, ref } from 'vue';
const props = defineProps({
  formField: {
    type: Object as PropType<FormDataInterFace>,
    required: true
  },
  currentFildData: {
    type: Object as PropType<FieldListInterFace>,
    required: true
  }
});
const calendarRef = ref<any>();
const currentForm: FormDataInterFace = computed(() => props.formField);
const calendarRefFun = () => calendarRef.value.open();
const calendarConfirm = (value: any) => {
  currentForm.value[props.currentFildData.field] = value.fulldate;
  props.currentFildData.callback && props.currentFildData.callback(value, currentForm.value);
};
</script>
<style scoped lang="scss">
.form_item {
  background: #ffffff !important;
  ::v-deep .is-disabled {
    background: #ffffff !important;
    pointer-events: none;
    color: #666;
  }
}
</style>
